<template>
  <div>
    <u-cell-group :border="false">
      <required-parameter />

      <cus-cell
        title="样式"
        :border="false"
        v-if="
          editConfigCom.attribute &&
          editConfigCom.attribute.hasOwnProperty('type')
        "
      >
        <div class="options">
          <div
            v-for="(item, index) in options"
            :key="index"
            class="options-item"
            @click="handleChangeType(item.type)"
            :class="{
              'options-active': editConfigCom.attribute.type === item.type,
            }"
          >
            <img :src="item.imageUrl" alt="" />
          </div>
        </div>
      </cus-cell>

      <cus-cell
        title="图标大小"
        :border="false"
        v-if="
          editConfigCom.attribute &&
          editConfigCom.attribute.hasOwnProperty('type') &&
          (editConfigCom.attribute.type === GIRD_TYPE.IMAGE_AND_TEXT ||
            editConfigCom.attribute.type === GIRD_TYPE.IMAGE)
        "
      >
        <div class="u-slot-slider">
          <u-slider
            v-model="cusImageAndTextIconSize"
            :max="200"
            @changing="
              onChangeComSize('imageAndTextIconSize', cusImageAndTextIconSize)
            "
          />
          <text class="value-text">{{ cusImageAndTextIconSize || "-" }}</text>
        </div>
      </cus-cell>

      <cus-cell
        title="列数"
        :border="false"
        v-if="
          (GIRD_TYPE.IMAGE_AND_TEXT === editConfigCom.attribute.type ||
            GIRD_TYPE.IMAGE === editConfigCom.attribute.type) &&
          editConfigCom.attribute &&
          editConfigCom.attribute.hasOwnProperty('col')
        "
      >
        <div style="width: 100%">
          <u-radio-group
            :customStyle="{ width: '100%' }"
            :activeColor="$theme.themeColor.primary"
            v-model="editConfigCom.attribute.col"
            placement="row"
          >
            <u-radio
              :customStyle="{ marginRight: 'auto' }"
              :name="2"
              label="两列"
            />
            <u-radio
              :customStyle="{ marginRight: 'auto' }"
              :name="3"
              label="三列"
            />
            <u-radio
              :customStyle="{ marginRight: 'auto' }"
              :name="4"
              label="四列"
            />
            <u-radio
              :customStyle="{ marginRight: 'auto' }"
              :name="5"
              label="五列"
            />
          </u-radio-group>
          <!--          <u-number-box v-model="editConfigCom.attribute.col" :max="5" />-->
        </div>
      </cus-cell>

      <cus-cell title="" :border="false">
        <div
          class="u-slot-upload"
          v-if="
            editConfigCom.attribute &&
            editConfigCom.attribute.hasOwnProperty('list')
          "
        >
          <draggable v-model="editConfigCom.attribute.list">
            <div
              v-for="(item, index) in editConfigCom.attribute.list"
              :key="index"
              class="cell__body"
            >
              <div class="upload-picker">
                <div
                  class="upload-picker-img"
                  @mouseenter="onMouseEnterShowUploadTips(index)"
                  @mouseleave="onMouseEnterShowUploadTips(-1)"
                >
                  <u-upload
                    :name="String(index)"
                    @afterRead="onUploadOnlyAfterRead"
                    :previewImage="false"
                    :maxSzie="10485760"
                    :maxCount="10"
                    width="100"
                    height="100"
                  >
                    <image
                      v-if="item.imageUrl"
                      :src="item.imageUrl"
                      mode="fix"
                      style="width: 5rem; height: 5rem"
                    />
                    <div
                      v-else
                      class="empty-area"
                      style="width: 5rem; height: 5rem; text-align: center"
                      :style="{ color: $theme.themeColor.primary }"
                    >
                      <div>
                        <u-icon
                          labelPos="center"
                          name="plus"
                          :color="$theme.themeColor.primary"
                        />
                        <view style="width: 100%">添加图片</view>
                      </div>
                    </div>
                  </u-upload>
                  <!--              -->
                  <div
                    class="upload-tips"
                    v-if="index === isShowUploadTipsIndex"
                  >
                    重新上传
                  </div>
                </div>
                <div class="upload-picker-navigateType">
                  <div class="upload-picker-navigateType-options">
                    <div style="margin-right: 10rpx">文字</div>
                    <u--input
                      placeholder="请输入导航文字"
                      border="surround"
                      v-model="item.text"
                      maxlength="6"
                    ></u--input>
                  </div>
                  <div class="upload-picker-navigateType-options">
                    <div style="margin-right: 10rpx">链接</div>
                    <div>
                      <uni-data-select
                        v-if="item && item.hasOwnProperty('navigateType')"
                        v-model="item.navigateType"
                        :localdata="navigateTypeOptions"
                        :clear="false"
                        style="width: 6rem"
                      ></uni-data-select>
                    </div>
                  </div>
                </div>
              </div>

              <navigate-item-config :listIndex="index" />
              <u-icon
                name="close-circle"
                class="upload-picker-del"
                size="20"
                @click="onDeletePic(index)"
              ></u-icon>
            </div>
          </draggable>
          <!--          <div class="tips">最多添加10个宫格，长按拖拽可改变顺序</div>-->
          <u-upload
            class="upload-picker"
            name="upload-picker"
            :maxSzie="10485760"
            @afterRead="onUploadAfterRead"
            :previewImage="false"
            :maxCount="10"
            width="100"
            height="100"
          >
            <u-button plain hairline type="primary" icon="plus" size="small"
              >添加宫格</u-button
            >
          </u-upload>
          <!--            <text class="">大小1m内支持使用png、jpg、gif格式</text>-->
        </div>
      </cus-cell>
    </u-cell-group>
  </div>
</template>

<script>
import requiredParameter from "@/components/cusFormConfig/requiredParameter";
import { uploadImage } from "@/service/api/base";
import { NAVIGATE_TYPE } from "@/const/widget";
import {
  NAVIGATE_PARAMS,
  navigateTypeOptions,
} from "@/components/navigateConfig/config";

const GIRD_TYPE = {
  //imageAndText-图文布局，image-单图片布局，imageLeftAndRight-图片左大右二布局，imageRightAndLeft-图片右大左二布局
  IMAGE_AND_TEXT: "imageAndText",
  IMAGE: "image",
  IMAGE_LEFT_AND_RIGHT: "imageLeftAndRight",
  IMAGE_RIGHT_AND_LEFT: "imageRightAndLeft",
};
export default {
  components: { requiredParameter },
  computed: {
    pageData() {
      return this.$store.state.page.page;
    },
    editConfigComActiveId() {
      return this.$store.state.page.editConfigComActiveId;
    },
    activeIndex({ pageData, editConfigComActiveId }) {
      return pageData.items.findIndex((v) => v.id === editConfigComActiveId);
    },
    //组件本身属性
    editConfigCom({ pageData, activeIndex }) {
      return pageData.items[activeIndex];
    },
  },
  data() {
    return {
      GIRD_TYPE,
      options: [
        {
          imageUrl: require(`@/static/widget/yqd-gird/${GIRD_TYPE.IMAGE_AND_TEXT}.png`),
          type: GIRD_TYPE.IMAGE_AND_TEXT,
        },
        {
          imageUrl: require(`@/static/widget/yqd-gird/${GIRD_TYPE.IMAGE}.png`),
          type: GIRD_TYPE.IMAGE,
        },
        {
          imageUrl: require(`@/static/widget/yqd-gird/${GIRD_TYPE.IMAGE_LEFT_AND_RIGHT}.png`),
          type: GIRD_TYPE.IMAGE_LEFT_AND_RIGHT,
        },
        {
          imageUrl: require(`@/static/widget/yqd-gird/${GIRD_TYPE.IMAGE_RIGHT_AND_LEFT}.png`),
          type: GIRD_TYPE.IMAGE_RIGHT_AND_LEFT,
        },
      ],
      NAVIGATE_TYPE,
      fileList: [],
      isSwiperCard: false,
      navigateTypeOptions,
      isShowUploadTipsIndex: -1,
      cusImageAndTextIconSize: "",
    };
  },
  created() {},
  mounted() {
    this.initComponentData();
  },
  methods: {
    //初始化基本样式属性
    initComponentData() {
      this.cusImageAndTextIconSize =
        this.editConfigCom?.style?.imageAndTextIconSize?.replace("rpx", "");
    },
    //----图标宽高 start----
    onChangeComSize(type, size) {
      if (size) {
        const unit = "rpx";
        this.editConfigCom.style[type] = size + unit;
      } else {
        this.editConfigCom.style[type] = "";
      }
    },
    handleChangeType(type) {
      this.editConfigCom.attribute.type = type;
    },
    onMouseEnterShowUploadTips(index) {
      this.isShowUploadTipsIndex = index;
    },
    //----上传图片 start----
    //轮播添加图片
    async onUploadAfterRead(e) {
      if (e.file.size > 1048576) {
        return this.$showMessage({
          op: "message",
          type: "error",
          content: `禁止上传超过1m的图片`,
        });
      }
      // if (this.editConfigCom.attribute.list.length >= 10) {
      //   return this.$showMessage({
      //     op: "message",
      //     type: "error",
      //     content: `最多添加10张图片`,
      //   });
      // }
      const url = await this.uploadFilePromise(e.file.url);
      this.editConfigCom.attribute.list.push({
        imageUrl: url,
        text: "默认",
        ...NAVIGATE_PARAMS,
      });
      await this.$showMessage({
        op: "message",
        type: "success",
        content: `上传${url ? "成功" : "失败"}`,
      });
      // uni.showToast({ title: `上传${res ? "成功" : "失败"}` });
    },
    //轮播置换图片
    async onUploadOnlyAfterRead(e) {
      if (e.file.size > 1048576) {
        return this.$showMessage({
          op: "message",
          type: "error",
          content: `禁止上传超过1m的图片`,
        });
      }
      const { name } = e;
      const index = Number(name);
      const url = await this.uploadFilePromise(e.file.url);
      const temp = this.editConfigCom.attribute.list[index];
      this.editConfigCom.attribute.list.splice(index, 1);
      this.editConfigCom.attribute.list.splice(index, 0, {
        ...temp,
        imageUrl: url,
        text: temp.text,
      });
      await this.$showMessage({
        op: "message",
        type: "success",
        content: `上传${url ? "成功" : "失败"}`,
      });
    },
    onDeletePic(e) {
      this.editConfigCom.attribute.list.splice(e, 1);
    },
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        uploadImage(url).then((res) => {
          const url = res.baseUrl + res.path;
          console.log("=====", url);
          res ? resolve(url) : reject(false);
        });
      });
    },
    //----上传图片 end----
  },
};
</script>

<style scoped lang="scss">
.cell__body {
  //display: flex;
  //flex-direction: row;
  box-sizing: border-box;
  padding: 10px 15px;
  font-size: 15px;
  color: #303133;
  align-items: center;
  background-color: #f9f9f9;
  //border-radius: 8px;
  margin: 10px 0;
  position: relative;
}
.empty-area {
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  font-size: 30rpx;
  color: #333;
}
.options {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  &-item {
    width: 20%;
    padding: 0 7px;
    height: 50px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  &-active {
    border: 1px solid $u-primary;
    margin: -1px;
  }
}

.u-slot-slider {
  width: 100%;
  display: flex;
  align-items: center;
  .value-text {
    width: 1.125rem;
  }
  .u-slider {
    flex: 1;
  }
}

.u-slot-upload {
  width: 100%;
  .upload-picker {
    margin-bottom: 10px;
    position: relative;
    display: flex;
    align-items: center;
    &-navigateType {
      margin: 0 10px;
      &-options {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
      }
    }
    &-img {
      position: relative;
      .upload-tips {
        position: absolute;
        background-color: rgba(0, 0, 0, 0.8);
        color: white;
        bottom: 0;
        width: 100%;
        text-align: center;
        font-size: 13px;
      }
    }
    &-del {
      position: absolute;
      top: -10px;
      right: -10px;
    }
    .u-button {
      width: 200px;
    }
  }
}
</style>
